<template>
  <div>
    <div>
    </div>
    <div class="DIS">
      <div class="left">
        <el-input style="margin-top:-75px;left: 400px;z-index:1000;" @blur="searchContentHandler" class="searchContent" v-model="searchContent" placeholder="请输入搜索内容" prefix-icon="el-icon-search"></el-input>
        <el-button  class="search" type="primary"  icon="el-icon-search" @click="searchTeacher">搜索</el-button>
      </div>
      <div style="margin-top:-55px;margin-right: 5px;z-index:1000">
        <el-button type="primary" icon="el-icon-plus" @click="createStudent">添加</el-button>
      </div>
    </div>
    <div class="tableStu">
      <el-popover
        placement="right"
        ref="popverRef"
        trigger="click">
        <div style="height: 30px;display:inline;">
          <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学生id
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级
          </h3>
        </div>
        <div>
          <el-input v-model="thisId" placeholder="老师id" style="width: 200px" disabled></el-input>
          <el-input v-model="thisName" placeholder="姓名" style="width: 200px" ></el-input>
          <el-select class="" v-model="thisGender" >
            <el-option
              v-for="item in eGender"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="thisAge" placeholder="年龄" style="width: 200px"></el-input>
          <el-select class="" v-model="thisLevel" >
            <el-option
              v-for="item in eLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-button type="success" round @click="updatePop">保存</el-button>
          <el-button type="primary" round @click="closePop">关闭</el-button>
        </div>
      </el-popover>



      <el-popover
        placement="right"
        ref="createPopoverRef"
        trigger="click">
        <div>
          <el-input v-model="createUser.username" placeholder="用户名" style="width: 170px" ></el-input>
          <el-input v-model="createUser.password" placeholder="密码" style="width: 170px" ></el-input>
          <el-input v-model="createUser.name" placeholder="姓名" style="width: 170px" ></el-input>
          <el-input v-model="createUser.age" placeholder="年龄" style="width: 170px" ></el-input>
          <el-select class="" v-model="createUser.gender" style="width: 170px" >
            <el-option
              v-for="item in eGender"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select class="" v-model="createUser.level" placeholder="学历" style="width: 170px" >
            <el-option
              v-for="item in eLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-button type="success" round @click="createNewPop">创 建</el-button>
          <el-button type="primary" round @click="closeNewPop">关 闭</el-button>
        </div>
      </el-popover>



      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="老师id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="男"
          width="180">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="150">
        </el-table-column>
        <el-table-column
          prop="level"
          label="学历"
          width="150">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="updateTec(scope.$index,scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    action() {
      let _this = this
      let responseData=[]
      this.$axios({
        method: 'GET',
        url: 'http://localhost/teacher/findAll',

      }).then(response => {

        let user = response.data
        for (let i of user) {
          responseData.push(i)

        }

        _this.tableData=responseData

      })
    },

    createStudent(){
      this.$refs.createPopoverRef.doShow();
    },



    closePop(){
      this.$refs.popverRef.doClose();
    },

    updateTec(index,row)
    {
      this.index=index;

      this.thisUsername=row.username;
      this.thisGender=row.gender;
      this.thisName=row.name;
      this.thisLevel=row.level;
      this.thisId=row.id;
      this.thisAge=row.age;
      this.$refs.popverRef.doShow();
    },

    searchContentHandler(){
      if(this.searchContent==='') this.action();
    },


    handleDelete(row,index) { //删除行数
      let _this=this
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$axios({
          method:'GET',
          url:'http://localhost/teacher/deleteById/'+index.id

        }).then(response=>{
          if(response.data=="ok"){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            _this.action()
          }

        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    searchTeacher(){
      if(this.searchContent!=="")
      {
        let _this = this
        let responseData=[]
        this.$axios({
          method: 'GET',
          url: 'http://localhost/teacher/searchTeacher/'+_this.searchContent,

        }).then(response => {

          let user = response.data
          for (let i of user) {
            responseData.push(i)

          }

          _this.tableData=responseData
        })
      }
    },


    createNewPop(){
      let _this=this;
      this.$axios({
        method:'GET',
        url:'http://localhost/user/findByUsernameReturnStatus/'+_this.createUser.username
      }).then(response=>{
        if(response.data===_this.createUser.status){
          this.$message.error('该用户已被注册！');
        }else
        {

          this.$axios({
            method:'POST',
            url:'http://localhost/user/save',
            data:{
              username: _this.createUser.username,
              password:_this.createUser.password,
              status:_this.createUser.status,
              gender: _this.createUser.gender,
              name: _this.createUser.name,
            }
          }).then(response=>{

            this.$axios({
              method:'POST',
              url:'http://localhost/teacher/save',
              data:{
                username: _this.createUser.username,
                gender: _this.createUser.gender,
                name: _this.createUser.name,
                age: _this.createUser.age,
                level: _this.createUser.level,
              }
            }).then(response=>{
              this.$message({
                message: '创建成功',
                type: 'success'
              })

              _this.action()
            })


          })


        }

      })

    },


    closeNewPop(){
      this.$refs.createPopoverRef.doClose();
    },


    updatePop(){
      this.tableData[this.index].username=this.thisUsername;
      this.tableData[this.index].name=this.thisName;
      this.tableData[this.index].age=this.thisAge;
      this.tableData[this.index].gender=this.thisGender;
      this.tableData[this.index].level=this.thisLevel;
      this.tableData[this.index].id=this.thisId;

      let _this=this;
      this.$axios({
        method:'PUT',
        url:'http://localhost/teacher/update',
        data:{
          id: _this.thisId,
          username: _this.thisUsername,
          gender: _this.thisGender,
          name: _this.thisName,
          del: 0,
          level:_this.thisLevel,
          age: _this.thisAge,
        }

      }).then(response=>{
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.$refs.popverRef.doClose();
      })
    }

  },




  mounted() {
    this.action()
  },
  data() {
    return {
      createUser:{
        username:'',
        password:'',
        name:'',
        age:'',
        gender:'',
        level:'',
        status:'teacher',
        del:0,
        id:'',
      },


      tableData: [],
      searchContent: '',
      thisUsername:'',
      thisName:'',
      thisGender:'',
      thisAge:'',
      thisLevel:'',
      thisId:'',
      index:'',
      eLevel: [{
        value: '小学',
        label: '小学'
      },
        {
          value: '初中',
          label: '初中'
        },
        {
          value: '高中',
          label: '高中'
        },
        {
          value: '本科',
          label: '本科'
        },
        {
          value: '硕士',
          label: '硕士'
        },
        {
          value: '博士',
          label: '博士'
        }],

      eGender: [{
        value: '男',
        label: '男'
      },
        {
          value: '女',
          label: '女'
        }],

    }
  },


}
</script>

<style scoped>
.elInput {
  display: inline;
}

.tableStu {
  position: absolute;
  height: 70%;
  width: 85.8%
}

.DIS {
  display: flex;
  height: 50px;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: row;
  height: 40px;
}

.search {
  position: relative;
  top:5px;
  left: 400px;
  margin-left: 20px;
}

.searchContent {
  position: relative;
  top:20px;
  margin-left: 20px;
}

.add {
  position: relative;
  top: -55px;
  left: 730px;
}
</style>
